<template>
	<view>
		<view class="userinfo">
			<view v-if="user && user.avatar" class="defaultAvatar">
				<image :src="user.avatar" mode="aspectFit"></image>
			</view>
			<view v-else class="defaultAvatar">
				<uni-icons style="color: #FFFFFF;" size="45" type="person-filled"></uni-icons>
			</view>
			
			<view class="logo-text">
				<text>{{user?user.username:'未登录'}}</text>
			</view>
		</view>
		
		<view class="tools">
			<view class="tools-item">
				<view>
					<uni-icons style="color:#007aff;" size="25" type="person-filled"></uni-icons>
				</view>
				<text>文字</text>
			</view>
			
			<view class="tools-item">
				<view>
					<uni-icons style="color:#007aff;" size="25" type="person-filled"></uni-icons>
				</view>
				<text>文字</text>
			</view>
			
			<view class="tools-item">
				<view>
					<uni-icons style="color:#007aff;" size="25" type="person-filled"></uni-icons>
				</view>
				<text>文字</text>
			</view>
			
			<view class="tools-item">
				<view>
					<uni-icons style="color:#007aff;" size="25" type="person-filled"></uni-icons>
				</view>
				<text>文字</text>
			</view>
		</view>
		
		<view class="mt-4">
			<uni-list>
				<uni-list-item title="普通签到" :extra-icon="{color: '#007aff',size: '22',type: 'staff'}" :show-extra-icon="true" show-arrow/>
				<uni-list-item title="阅读过的文章" :extra-icon="{color: '#007aff',size: '22',type: 'cloud-download'}" :show-extra-icon="true" show-arrow/>
				<uni-list-item title="我的积分" :extra-icon="{color: '#007aff',size: '22',type: 'color-filled'}" :show-extra-icon="true" show-arrow/>
				<uni-list-item title="留言" :extra-icon="{color: '#007aff',size: '22',type: 'chat'}" :show-extra-icon="true" show-arrow/>
				<uni-list-item title="设置" :extra-icon="{color: '#007aff',size: '22',type: 'tune-filled'}" :show-extra-icon="true" show-arrow/>
				<uni-list-item title="关于" :extra-icon="{color: '#007aff',size: '22',type: 'star-filled'}" :show-extra-icon="true" show-arrow/>
			</uni-list>
		</view>
		
		<view v-if="user" class="mt-4">
			<button  @click="logout" class="rounded-45 font bg-danger text-white" style="height: 65rpx;line-height: 65rpx;">退出</button>
		</view>
	</view>
</template>
<script setup>
import {onLoad} from '@dcloudio/uni-app';
import { ref } from 'vue';

const user=ref(null);

onLoad((e)=>{
	uni.getStorage({
		key:'app-user',
		success: (res) => {
			user.value=res.data;
			user.value.avatar='/static/image/logo.png';
		}
	})
});

function logout(){
	uni.showModal({
		title:'提示',
		content:'您确定要退出吗？',
		success: (res) => {
			if(res.confirm){
				uni.clearStorage();
				uni.reLaunch({url:'/pages/login'})
			}
		}
	})
}

</script>
<style scoped>
.userinfo{
	width: 100%;height: 300rpx;
	background-color: cadetblue;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.defaultAvatar{
	width: 150rpx;height: 150rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: blue;
	border-radius: 100%;
}
.logo-text{
	text-align: center;
	color: #FFFFFF;
	font-size: 30rpx;
	padding-top: 20rpx;
}

.tools{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.tools-item{
	display: flex;
	flex-direction: column;
	flex: 1;
}
</style>